<template>
    <div>
        <el-row :gutter="10" class="sysImageZt">
            <el-col :span="5">
                <el-menu :default-active="defaultActive" class="el-menu-vertical-demo">
                    <el-menu-item index="1" @click="handleClick('我的收藏')">
                        <i class="el-icon-star-off"></i>
                        <span slot="title">{{ $t('topo.topoSelectImage.034642-0') }}</span>
                    </el-menu-item>
                    <el-submenu class="submenuClass" index="2">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>{{ $t('scada.gallery.309456-0') }}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="dict in imageType" :key="dict.value" :index="dict.value"
                                :label="dict.label" :value="dict.value" @click="handleClick(dict.value)">{{
                                    language === 'en-US' ? dict.dictLabel_en_US : dict.value
                                }}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
            <el-col :span="19">
                <div>
                    <el-form v-if="isHide" v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams"
                        label-width="68px">
                        <el-form-item :label="$t('scada.gallery.309456-1')" prop="moduleName">
                            <el-input v-model="queryParams.fileName" clearable
                                :placeholder="$t('scada.gallery.309456-2')" size="small"
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" size="mini" type="cyan" @click="handleQuery">{{
                                $t('search')
                                }}</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset')
                            }}</el-button>
                            <el-button v-if="this.queryParams.moduleName != '我的收藏'" :disabled="multiple"
                                icon="el-icon-star-off" size="mini" type="cyan" @click="handleCollection">{{
                                    $t('topo.topoSelectImage.034642-4')
                                }}</el-button>
                        </el-form-item>
                    </el-form>

                    <el-row :gutter="10" style="margin-bottom: 10px">
                        <el-col v-if="isHide" :span="1.5">
                            <el-upload ref="upload" :action="upload.uploadUrl" :before-remove="beforeRemove"
                                :before-upload="beforeUpload" :file-list="upload.imageList" :headers="upload.headers"
                                :limit="10" :on-exceed="handleExceed" :on-preview="handlePreview"
                                :on-remove="handleRemove" :on-success="handleAvatarSuccess" :show-file-list="false"
                                class="upload-demo" multiple>
                                <el-button
                                    v-if="this.queryParams.moduleName == '我的收藏' || this.queryParams.moduleName == '我的上传'"
                                    size="mini" type="primary" @click="uploadFile">
                                    <i class="el-icon-upload el-icon--right" />
                                    上传
                                </el-button>
                            </el-upload>
                        </el-col>
                        <el-col v-if="this.queryParams.moduleName == '我的收藏' || this.queryParams.moduleName == '我的上传'"
                            :span="1.5">
                            <el-button :disabled="multiple" icon="el-icon-delete" size="mini" type="danger"
                                @click="handleDelete">{{
                                    $t('del') }}</el-button>
                        </el-col>
                    </el-row>
                    <div class="imageClass">
                        <el-checkbox-group v-model="checkList" @change="radioChange">
                            <el-card v-for="item in uploadList" :key="item.id" :body-style="{ padding: '5px' }"
                                :style="boxCard">
                                <el-image :preview-src-list="[baseApi + item.resourceUrl]"
                                    :src="baseApi + item.resourceUrl" class="cardImage" />
                                <div style="padding: 5px; text-align: left">
                                    <span style="font-size: 11px">{{ item.fileName }}</span>
                                    <el-checkbox :label="item" class="selectRadioText"><span
                                            v-show="false">占位符</span></el-checkbox>
                                </div>
                            </el-card>
                        </el-checkbox-group>
                    </div>
                    <Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page-size="5"
                        :page-sizes="[24, 48, 72]" :page.sync="queryParams.pageNum" :total="total"
                        @pagination="getList" />
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import request from '@/utils/request';
import Pagination from '@/components/Pagination';

export default {
    components: {
        Pagination,
    },
    name: 'Upload',
    props: {
        moduleName: String,
        message: String,
    },
    data() {
        return {
            language: this.$store.state.settings.language,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: false,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 上传信息表格数据
            uploadList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 24,
                deptIdStrs: null,
                moduleName: '我的收藏',
                fileName: '',
                moduleGuid: '云组态',
                resourceUrl: null,
                orderByColumn: 'updateTime',
                isAsc: 'desc',
            },
            upload: {
                // 设置上传的请求头部
                headers: { Authorization: 'Bearer ' + sessionStorage.getItem('Admin-Token-WebTopo') },
                // 上传的地址
                uploadUrl: '',
                imageList: [],
            },
            dialogVisible: false,
            baseApi: process.env.VUE_APP_BASE_API,
            imageUrl: '',
            selectionImage: {},
            isHide: true,
            isHideImage: true,
            //组态
            boxCard: {
                width: 'auto',
                height: 'auto',
                margin: '5px',
                display: 'inline-block',
            },
            selectImageRadio: null,
            imageType: [],
            defaultActive: '',
            checkList: [],
        };
    },
    created() { },
    mounted() {
        if (this.message != undefined) {
            this.isHide = false;
            this.isHideImage = false;
            this.isHideImage = true;
        }
        this.getImageType();
    },
    methods: {
        //获取图库类别
        getImageType() {
            let query = {};
            let url = '/system/dict/data/type/sys_image_type';
            request({
                url: url,
                method: 'get',
                params: query,
            }).then((res) => {
                // console.log('图库类别',res);
                this.imageType = [];
                this.defaultActive = '';
                res.data.forEach((element) => {
                    if (!this.defaultActive) {
                        this.defaultActive = element.dictValue;
                    }
                    let data = {
                        label: element.dictLabel,
                        value: element.dictValue,
                        dictLabel_en_US: element.dictLabel_en_US,
                    };
                    this.imageType.push(data);
                });
                this.queryParams.moduleName = this.defaultActive;
                this.getList();
            });
        },
        //收藏
        handleCollection() {
            // console.log(this.selectImageRadio);
            this.checkList.forEach((element) => {
                let data = {
                    moduleName: '我的收藏',
                    resourceUrl: element.resourceUrl,
                    fileName: element.fileName,
                    moduleGuid: '云组态',
                };
                let url = '/zutai/upload';
                request({
                    url: url,
                    method: 'post',
                    data: data,
                });
            });
            this.$message('收藏成功');
            this.checkList = [];
        },
        radioChange() {
            // console.log(this.checkList);
            this.multiple = false;
        },
        handleClick(label) {
            this.queryParams.moduleName = label;
            this.multiple = true;
            this.getList();
        },
        getList() {
            this.loading = true;
            this.checkList = [];
            let url = '/zutai/upload/list';
            request({
                url: url,
                method: 'get',
                params: this.queryParams,
            })
                .then((res) => {
                    // console.log('获取成功!',res);
                    if (res.code == 200) {
                        this.uploadList = res.rows;
                        this.total = res.total;
                    }
                    this.loading = false;
                })
                .catch((error) => {
                    // console.log(error)
                    this.loading = false;
                });
        },
        handleChoice() {
            // this.$message('选择图标'+this.checkList);
            return this.checkList;
            //this.$parent.$parent.handleChoice(this.selectionImage);
        },
        clearChoice() {
            this.checkList = [];
        },
        /** 查询上传信息列表 */
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            if ((this.queryParams.moduleName = '重置')) {
                this.queryParams.moduleName = '我的收藏';
            } else {
                this.queryParams.moduleName = '';
            }
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.fileName = '';
            this.queryParams.moduleName = '重置';
            this.handleQuery();
        },
        /** 删除按钮操作 */
        handleDelete() {
            const ids = [];
            this.checkList.forEach((element) => {
                ids.push(element.id);
            });
            let that = this;
            this.$confirm('是否确认删除此图标组件么？', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(function () {
                return that.deleImage(ids);
            });
        },
        deleImage(ids) {
            let url = '/zutai/upload/' + ids;
            let that = this;
            request({
                url: url,
                method: 'delete',
            }).then(() => {
                that.getList();
                that.msgSuccess('删除成功');
            });
        },
        uploadFile() {
            const data = {
                isMultiple: true,
                moduleGuid: '云组态',
                moduleName: this.moduleName,
            };
            request({
                url: '/zutai/upload/uploadData',
                method: 'post',
                params: data,
            }).then((res) => { });
            // this.upload.uploadUrl="/prod-api/zutai/upload/uploadData"+"?isMultiple=true&moduleGuid=云组态&moduleName="+this.queryParams.moduleName;
        },
        handleRemove(file, fileList) { },
        handlePreview(file) { },
        handleExceed(files, fileList) { },
        beforeUpload(file) {
            if (this.queryParams.moduleName == '') {
                this.$message({
                    message: '请选择左侧上传的类型',
                    type: 'warning',
                });
                this.$refs.upload.abort();
                return false;
            }
            const isLt2M = file.size / 1024 / 1024 < 3;
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 3MB!');
            }
            return isLt2M;
        },
        beforeRemove(file, fileList) { },
        handleAvatarSuccess(res, file) {
            if (res.code == 200) {
                this.msgSuccess('上传成功');
                this.getList();
                this.$refs.upload.clearFiles();
            } else {
                this.msgSuccess(res.msg);
            }
        },
        msgSuccess(msg) {
            this.$message({
                message: msg,
                type: 'success',
            });
        },
    },
};
</script>
<style scoped>
.sysImageZt {
    margin-top: 20px;
}

.image {
    width: 100px;
    height: 100px;
}

.selectRadioText {
    color: #ffff;
    padding: 5px;
    float: right;
}

.submenuClass {
    height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
}

.imageClass {
    height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
}

.cardImage {
    width: 80px;
    height: 70px;
}
</style>>
